<template>
  <div class="box">
    <div id="map"></div>
    <div
      id="popup"
      class="ol-popup"
    >
      <a
        href="#"
        id="popup-closer"
        class="ol-popup-closer"
      ></a>
      <div id="popup-content"></div>
    </div>
    <!-- <div class="addBox">
      <label for="">
        添加点:
        <br />
        经度:<input
          type="text"
          v-model="x"
        /> 纬度:<input
          type="text"
          v-model="y"
        />
      </label>
      <button @click="add">确定</button>
      <div>
        在经度： 12724035.929782324 - 12733770.185392754 纬度：3565054.5294656293
        - 3569896.815192916之间新增
      </div>
    </div> -->
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Polygon from "ol/geom/Polygon";
import Circle from "ol/geom/Circle";
import { Style, Icon, Fill, Stroke } from "ol/style";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Overlay from "ol/Overlay";
// import {toStringHDMS} from 'ol/coordinate';
// import {toLonLat} from 'ol/proj';
import GeoJSON from "ol/format/GeoJSON";
import localInfo from "../model/getManyLocal";
import gisApi from "../../gisApi";
export default {
  data() {
    return {
      map: null,
      shopPopup: false,
      currentCoordinate: "",
      localList: [],
      localSource: null,
      x: null,
      y: null,
      pointList: {},
      vectorLayer: null,
      polygonLayer: null,
      polygonData: [
        [12727286.142932441, 3565816.87607386],
        [12727274.332413288, 3565711.6551905456],
        [12727274.690302016, 3565690.5394006404],
        [12727289.363958295, 3565683.7394328974],
        [12727280.058714848, 3565608.2237508693],
        [12727379.553310256, 3565596.0553702945],
        [12727402.100627767, 3565669.423665345],
        [12727411.763787247, 3565761.044585869],
        [12727412.837480737, 3565803.2760974164],
      ],
    };
  },
  created() {},
  mounted() {
    this.init();
    this.map.getView().on("change:resolution", this.checkZoom);
    this.manyLocal();
    // this.map.on("pointermove", (e) => {
    //   var pixel = this.map.getEventPixel(e.originalEvent);
    //   var hit = this.map.hasFeatureAtPixel(pixel);
    //   if (hit) {
    //     this.map.getTargetElement().style.cursor = "pointer";
    //   } else {
    //     this.map.getTargetElement().style.cursor = "";
    //   }
    // });
  },
  methods: {
    checkZoom() {
      if (this.map.getView().getZoom() >= 15) {
        this.polygonLayer.setVisible(true);
      } else {
        if (this.polygonLayer != null) {
          this.polygonLayer.setVisible(false);
          // this.polygonLayer.getSource().clear();
        }
      }
    },
    addPolygon() {
      var polygon = new Polygon([this.polygonData]);
      var feature = new Feature(polygon);
      var vectorSource = new VectorSource();
      vectorSource.addFeature(feature);
      this.polygonLayer = new VectorLayer({
        style: new Style({
          stroke: new Stroke({
            color: "rgba(100, 255, 0, 1)",
            width: 2,
          }),
          fill: new Fill({
            color: [255, 255, 255, 0.2],
          }),
        }),
        source: vectorSource,
      });
      this.polygonLayer.setVisible(false);
      this.map.addLayer(this.polygonLayer);
    },
    init() {
      var source = new XYZ({
        url: "gisapi/tiles/{z}/{x}/{y}.jpg",
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: source,
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 10,
        }),
      });
      this.popup();
      this.addPolygon();
    },
    locate(geo) {
      this.map.getView().fit(geo, {
        maxZoom: 15,
        duration: 500,
        padding: [300, 300, 0, 0],
      });
    },
    onFeatureSelect(feature) {
      console.log(feature);
    },
    manyLocal() {
      // var image = new CircleStyle({
      //   radius: 5,
      //   fill: new Fill({
      //     color: "red",
      //   }),
      //   stroke: new Stroke({ color: "red", width: 1 }),
      // });
      // var styles = {
      //   Point: new Style({
      //     image: image,
      //   }),
      //   MultiPoint: new Style({
      //     image: image,
      //   }),
      //   Circle: new Style({
      //     stroke: new Stroke({
      //       color: "red",
      //       width: 5,
      //     }),
      //     fill: new Fill({
      //       color: "rgba(255,0,0,0.2)",
      //     }),
      //   }),
      // };
      localInfo.getManyLocal().then((res) => {
        this.pointList = res.data;
        var vectorSource = new VectorSource({
          features: new GeoJSON().readFeatures(this.pointList),
        });
        vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
        this.vectorLayer = new VectorLayer({
          source: vectorSource,
          style: new Style({
            image: new Icon({
              scale: 1,
              anchor: [0.5, 1],
              src: require("../assets/skyBlue.png"),
              brush: null,
            }),
          }),
        });
        this.map.addLayer(this.vectorLayer);
      });
    },
    add() {
      if (
        12724035.929782324 < this.x * 1 < 12733770.185392754 &&
        3565054.5294656293 < this.y < 3569896.815192916
      ) {
        var geometry = {
          type: "Point",
          coordinates: [this.x * 1, this.y * 1],
        };
        this.pointList.features.push({
          type: "Feature",
          geometry,
        });
        this.locate(geometry);
        localInfo.addLocal(this.pointList).then((res) => {
          console.log(res.data);
          alert("新增成功!");
          this.manyLocal();
        });
      } else {
        alert("请输入正确范围内的经纬度!");
      }
    },
    popup() {
      //获取弹窗dom元素
      var container = document.getElementById("popup");
      var content = document.getElementById("popup-content");
      var closer = document.getElementById("popup-closer");
      //创建一个覆盖层
      this.popupLayer = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250,
        },
      });
      closer.onclick = () => {
        this.popupLayer.setPosition(undefined);
        closer.blur();
        return false;
      };
      //添加该图层
      this.map.addOverlay(this.popupLayer);
      //点击地图遍历所有feature
      this.map.on("singleclick", (evt) => {
        //如果有相交的feature则返回这个feature并显示出来
        var feature = this.map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature;
          }
        );
        if (feature) {
          var coordinate = evt.coordinate;
          content.innerHTML = "<p>坐标:</p><code>" + coordinate + "</code>";
          var coordinates = feature.getGeometry().getCoordinates();
          this.popupLayer.setPosition(coordinates);
        }
      });
    },
  },
  watch: {
    // pointList: {
    //   deep: true,
    //   handler: function () {
    //     this.manyLocal();
    //   },
    // },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.locate {
  top: 6em;
  left: 0.5em;
}
#map {
  width: 100%;
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
.addBox {
  position: absolute;
  bottom: 1%;
  background-color: #fff;
  left: 1%;
}
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
</style>
